Wtyczka służy do pobierania opisu+zdjęcia avatra z twittera, dodatkowo wyświetla czas kiedy wpis był umieszczony. Mam kilka pytań bo nie do końca rozumiem działanie tego skryptu.
1. Co to jest funkcja, klasa, obiekt ? (sry za takie pytanie ale naprawdę mam wątpliwości a chce wiedzieć)
2. Referencja this w this.replace czy donosi się do tego obiektu jQuery $([item.text]) ?
3. Do czego odnosi się referencja this w
this.each(function() {returning.push(this.replace(regexp,"<a href=\"$1\">$1</a>"))}); i jakie zastosowanie mają $1, drugi argument funkcji replace to tekst do zastępujący wyrażenie pasujące do regexp więc nie za bardzo to rozumiem.
(function($) {
$.fn.tweet = function(o){
var s = {
username: ["user_name"], // [string] required, unless you want to display our tweets. :) it can be an array, just do ["username1","username2","etc"]
avatar_size: null, // [integer] height and width of avatar if displayed (48px max)
count: 1, // [integer] how many tweets to display?
loading_text: null, // [string] optional loading text, displayed while tweets load
query: null // [string] optional search query
};
$.fn.extend({
linkUrl: function() {
var returning = [];
var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
this.each(function() {
returning.push(this.replace(regexp,"<a href=\"$1\">$1</a>"))
});
return $(returning);
},
linkUser: function() {
var returning = [];
var regexp = /[\@]+([A-Za-z0-9-_]+)/gi;
this.each(function() {
returning.push(this.replace(regexp,"<a href=\"http://twitter.com/$1\">@$1</a>"))
});
return $(returning);
},
linkHash: function() {
var returning = [];
var regexp = / [\#]+([A-Za-z0-9-_]+)/gi;
this.each(function() {
returning.push(this.replace(regexp, ' <a href="http://search.twitter.com/search?q=&tag=$1&lang=all&from='+s.username.join("%2BOR%2B")+'">#$1</a>'))
});
return $(returning);
},
capAwesome: function() {
var returning = [];
this.each(function() {
returning.push(this.replace(/(a|A)wesome/gi, 'AWESOME'))
});
return $(returning);
},
capEpic: function() {
var returning = [];
this.each(function() {
returning.push(this.replace(/(e|E)pic/gi, 'EPIC'))
});
return $(returning);
},
makeHeart: function() {
var returning = [];
this.each(function() {
returning.push(this.replace(/[<]+[3]/gi, "<tt class='heart'>♥</tt>"))
});
return $(returning);
}
});
function relative_time(time_value) {
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
if(delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (45*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (90*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
if(o) $.extend(s, o);
return this.each(function(){
var list = $('<span class="tweet">').appendTo(this);
var loading = $('<span class="loading">'+s.loading_text+'</span>');
if(typeof(s.username) == "string"){
s.username = [s.username];
}
var query = '';
if(s.query) {
query += 'q='+s.query;
}
query += '&q=from:'+s.username.join('%20OR%20from:');
var url = 'http://search.twitter.com/search.json?&'+query+'&rpp='+s.count+'&callback=?';
if (s.loading_text) $(this).append(loading);
$.getJSON(url, function(data){
if (s.loading_text) loading.remove();
$.each(data.results, function(i,item){
var avatar_template = '<a class="tweet_avatar" href="http://twitter.com/'+ item.from_user+'"><img src="'+item.profile_image_url+'" height="'+s.avatar_size+'" width="'+s.avatar_size+'" alt="'+item.from_user+'\'s avatar" border="0"/></a>';
var avatar = (s.avatar_size ? avatar_template : '')
var date = '<a href="http://twitter.com/'+item.from_user+'/statuses/'+item.id+'" title="view tweet on twitter">'+relative_time(item.created_at)+'</a>';
var text = '<span class="tweet_text">' +$([item.text]).linkUrl().linkUser().linkHash().makeHeart().capAwesome().capEpic()[0]+ '</span>';
// until we create a template option, arrange the items below to alter a tweet's display.
list.append(text + '</span>');
$(".date").html(relative_time(item.created_at));
$(".avatar").html(avatar);
});
});
});
};
})(jQuery);